<template>
  <div class="person">
    <mt-header title="个人信息"></mt-header>
    <div class="info">
      <div class="pic">
        <img src="../../assets/img/good.jpg">
      </div>
      <div class="name">
        <p>昵称</p>
      </div>
    </div>
    <div class="detail">
      <div class="line"></div>
      <div class="word">
        <mt-cell title="历史订单" is-link>
          <img slot="icon" src="../../assets/img/history.png">
        </mt-cell>
        <div class="line"></div>
        <mt-cell title="我的地址" is-link>
          <img slot="icon" src="../../assets/img/location.png">
        </mt-cell>
        <div class="line"></div>
        <mt-cell title="我的评价" is-link>
          <img slot="icon" src="../../assets/img/comment.png">
        </mt-cell>
        <div class="line"></div>
        <mt-cell title="设置" is-link>
          <img slot="icon" src="../../assets/img/setting.png">
        </mt-cell>
      </div>
      <div class="line"></div>
    </div>
    <mt-tabbar v-nodel="selected">
      <mt-tab-item id="manage">
        <img slot="icon" src="../../assets/img/person.png" @click="showOrder"/>
        订单管理
      </mt-tab-item>
      <mt-tab-item id="person">
        <img slot="icon" src="../../assets/img/person.png" @click="showPerInfo"/>
        个人信息
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<style scoped>
  .person {
    background-color: #fff;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .info {
    position: absolute;
    width: 100%;
    height: 15%;
    margin-top: 10px;
  }

  .pic {
    position: absolute;
    left: 5%;
    width: 30%;
    height: 15%;
    margin-top: 15px;
  }

  .pic img {
    width: 60px;
    height: 60px;
    border-radius: 60px;
  }

  .name {
    position: absolute;
    left: 35%;
    width: 65%;
    height: 15%;
    margin-top: 25px;
  }

  .name p {
    font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
    display: block;
    font-weight: 300;
    font-size: 25px;
    color: #35495e;
    letter-spacing: 1px;
    text-align: left;
  }

  .detail {
    position: absolute;
    top: 25%;
    width: 100%;
    height: 100%;
    margin-top: 5px;
  }

  .line {
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
  }

  .word {
    position: absolute;
    width: 90%;
    height: 38%;
    left: 5%;
    right: 5%;
    margin-top: 3%;
  }

  .detail img {
    width: 40px;
    height: 40px;
  }

</style>
